<template>
  <div
    class="px-5 lg:mt-5 lg:mb-14 lg:flex lg:flex-row"
    :class="!hasResults ? 'lg:justify-center' : 'lg:justify-between'">
    <div class="lg:shrink-0">
      <common-empty v-if="!hasResults" class="mx-auto mt-28" />
      <!--    输入框-->
      <div
        class="my-6 shadow-sm shadow-black lg:w-full flex items-center justify-between rounded-3xl bg-[#232728] px-5 py-3 focus:border-[2px] lg:mb-8 lg:px-14 lg:py-3 text-base focus-within:border-red1 focus-within:shadow-md duration-200 focus-within:shadow-[rgba(255,0,0,0.4)] border-[2px] border-transparent"
        :class="{
          'mx-auto': !hasResults,
        }">
        <input
          class="bg-transparent w-full"
          v-model="keywords"
          ref="inputEl"
          @keydown.enter="searchHandle(true)"
          :placeholder="$mt('Search')" />
        <van-icon class="cursor-pointer" @click="searchHandle(true)" name="search" size="22px" />
      </div>
      <!-- tips -->
      <p v-if="!hasResults" class="mb-5 px-5 text-center lg:text-sm lg:font-medium">
        {{ $mt('Type your search keywords for Game / Card / Direct Top-Up and press ENTER to search.') }}
      </p>
    </div>
    <!-- 搜索到的内容 -->
    <main class="lg:w-[68%]" v-if="hasResults">
      <div class="mb-6 flex text-xl">
        <h4 class="ltr:mr-2 rtl:ml-2">{{ $mt('Related Goods') }}</h4>
        <span v-if="goodsList.length" class="text-[#8c8d8e]">({{ searchInfo?.totalElements }})</span>
      </div>
      <section class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <nuxt-link
          external
          :to="$localePath(`/goods/${item.urlName || item.id}`)"
          v-for="(item, idx) in goodsList"
          :key="item.id"
          class="flex items-center">
          <y-image
            height="100"
            width="100"
            class="rounded-lg bg-black product-poster shrink-0 w-20 h-20 lg:w-28 lg:h-28 ltr:mr-6 rtl:ml-6 transform hover:scale-110 lg:transition-transform duration-200"
            :src="item.smallIcon" />
          <div>
            <h4 class="text-sm lg:text-base line-clamp-3">{{ item.name }}</h4>
            <p class="text-xs text-gray">{{ item.areaCode }}</p>
          </div>
        </nuxt-link>
      </section>
      <div class="lg:flex lg:justify-end">
        <van-pagination
          @change="numChange"
          :total-items="searchInfo?.totalElements"
          class="w-full lg:w-[400px] mx-auto mt-6 lg:mt-12"
          :items-per-page="size"
          :model-value="num"
          mode="simple">
          <template #prev-text>
            <div class="w-full h-full flex items-center justify-center" :class="{ 'pointer-events-none': num === 1 }">
              <van-icon name="arrow-left" @click="num - 1" />
            </div>
          </template>
          <template #next-text>
            <div
              class="w-full h-full flex items-center justify-center"
              :class="{ 'pointer-events-none': searchInfo?.totalElements === num }"
              @click="num + 1">
              <van-icon name="arrow" />
            </div>
          </template>
          <!-- <template #page="{ text }">{{ text }}</template> -->
        </van-pagination>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import { useRouteQuery } from '@vueuse/router'
import CommonEmpty from '~/components/basis/CommonEmpty.vue'
useSeoMeta({ title: 'BitTopup - Search Result' })
const keywords = useRouteQuery('keywords')
const inputEl = ref(null as HTMLInputElement)
const goodsList = ref<Record<any, any>[]>([])
const hasResults = computed(() => !!goodsList.value.length)
const { withLoadingToastRef } = useRequestLoading()
const { requestGetNew } = useRequest()
const num = ref(1)
const size = ref(30)
const searchInfo = ref({})
const { $mt } = useCommonPlugin()
const searchHandle = async (resetPage?) => {
  if (!keywords.value) return
  if (resetPage) {
    num.value = 1
    size.value = 30
    inputEl.value?.blur()
  }
  searchInfo.value = await requestGetNew(`/app/goods/getGoodsByKeywords/${num.value}/${size.value}`, {
    keywords: keywords.value,
  })
  goodsList.value = searchInfo.value?.data
  window.scrollTo({ top: 0 })
  if (!goodsList.value.length)
    return showConfirmDialog({
      title: $mt('Notice'),
      message: $mt('Sorry, no relevant products were found. Please change your search keywords.'),
      showCancelButton: false,
      confirmButtonText: 'OK',
    })
}
onMounted(() => {
  searchHandle()
})
withLoadingToastRef()

// 页码改变
const numChange = (curPage) => {
  num.value = curPage
  searchHandle()
}
</script>

<style scoped lang="scss">
:deep(.van-pagination__item) {
  color: #fff;
  background: #35393b;
  border: 0;
  //border-radius: 12px;
}

:deep(.van-hairline--surround:after) {
  display: none;
}

:deep(.van-pagination__items) {
  display: flex;
}
</style>
